<template>
 <div>
    <ol>
      <li 
      v-for="(item,index) in list" 
      :key="index" 
      @click="changeIndex(index)" 
      :class='{ on:activeIndex==index }'>{{item.title}}</li>
    </ol>
 </div>
</template>

<script>
export default {
  props: {
    list:Array,
    activeIndex:Number
  },
  methods:{
    changeIndex(index){
      this.bus.$emit('changeActive',index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ol{
  margin-left: 20px;
   float: left;
}
li{
  line-height: 60px;
}
.on{
  color: #09f;
}
</style>
